import React from 'react';
import {
  Form,
  Input,
  Modal,
  Card
} from 'antd';

const FormItem = Form.Item

const formItemLayout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 14,
  },
};

const updateRoleForm = ({
  dispatch,
  onOk,
  currentUpdateItem,
  form: {
    getFieldDecorator,
    validateFieldsAndScroll
  },
  ...updateModalProps
}) => {

  const handleSubmit = () => {
    validateFieldsAndScroll((err, values) => {
      if (!err) {
        if (values.name.substr(0, 5) !== "ROLE_") {
          Modal.info({ title: '提示', content: `角色编码必须以「ROLE_」开头` });
          return;
        }
        values.id = currentUpdateItem.id;
        values.version = currentUpdateItem.version;
        onOk(values);
      }
    });
  };

  const modalOpts = {
    ...updateModalProps,
    onOk: handleSubmit
  }

  return (
    <Modal {...modalOpts}>
      <Card bordered={false}>
        <Form onSubmit={handleSubmit} hideRequiredMark>
          <FormItem {...formItemLayout} label="角色编码">
            {getFieldDecorator('name', {
              rules: [
                {
                  required: true,
                  message: '请输入角色编码',
                  whitespace: true
                },
              ],
              initialValue: currentUpdateItem.name,
            })(<Input placeholder="请输入角色编码" />)}
          </FormItem>
          <FormItem {...formItemLayout} label="角色名称">
            {getFieldDecorator('description', {
              rules: [
                {
                  required: true,
                  message: '请输入角色名称',
                  whitespace: true
                },
              ],
              initialValue: currentUpdateItem.description,
            })(<Input placeholder="请输入角色名称" />)}
          </FormItem>
        </Form>
      </Card>
    </Modal>
  )
}

export default Form.create()(updateRoleForm);
